<template>
    <div class="login b-f dis-flex flex-dir-column flex-y-center">
        <!-- logo -->
        <img :src="user.websiteLogUrl" alt="" class="logo" />
        <div class="title">欢迎登录安易付</div>
        <div class="login-btn active" @click="onLogin">
            <img src="../assets/img/WeChat@1x.svg" alt="" />
            <div class="text">微信授权登录</div>
        </div>
        <div class="others-login">
            <div class="left" @click="goPassword">密码登录</div>
            <div class="middle"></div>
            <div class="right" @click="goCode">验证码登录</div>
        </div>
        <div class="agreement">
            <van-checkbox
                v-model="checked"
                checked-color="#f24b3a"
                icon-size="15px"
            ></van-checkbox>
            <div class="ct">
                <div class="ag">我已阅读并同意</div>
                <div class="col-9">
                    <span style="color: #ffa543">《用户协议》</span>
                    <span>、</span>
                    <span style="color: #ffa543">《隐私政策》</span>
                </div>
            </div>
        </div>
        <div class="call">
            如有疑问，请拨打客服电话
            <span class="col-3">400-931-8788</span>
        </div>
    </div>
</template>

<script>
    import {
        Notify, Toast
    } from 'vant';
    export default {
        data() {
            return {
                user: {},
                checked: false,
                code: ''
            }
        },
        methods: {
            goPassword() {
                this.$router.push("/login-pwd");
            },
            goCode() {
                this.$router.push("/login-code");
            },
            onLogin() {
                if (this.checked) {
                    Toast.loading({
                        message: '登录中...',
                        forbidClick: true,
                    });
                    // 有code且未登录
                    this.$api.accredit.getEncryptInfoApi({
                        encryptUrl: window.location.href
                    }).then((res) => {
                        console.log("获取加密信息", res);
                        // console.log('this.$store', this.$store)
                        if (res.data?.encryptedIdentityData && res.data.encryptedIdentityData != '' && res.data.encryptedIdentityData != null) {
                            this.$store.commit('setToken', res.data.encryptedIdentityData)
                            this.$store.commit('setLogin', '1')
                            this.$router.push('/loading')
                        } else {
                            Toast('未获取到加密参数')
                            this.$router.push('/loading')
                        }
                        Toast.clear();
                    }).catch(async (err) => {
                        console.log("err", err);
                        Toast.clear();
                    })
                }else{
                    this.$toast('请阅读并同意相关协议')
                }
            },
            async getUserInfo() {
                let code = this.$utils.func.getParamFromUrl(window.location.href.split("#")[0], "code")
                console.log("登录页获取的code", code);
                if (code) {
                    this.code = code
                } else {
                    try {
                        let res = await this.$api.accredit.getCodeApi({
                            encryptUrl: encodeURIComponent(window.location.href)
                        })
                        console.log("获取code结果", res);
                        window.location.href = res.data
                    } catch (error) {
                        this.$toast(error.message)
                        console.log("获取code报错", error);
                    }
                }
            },
            setInfo() {
                let data = this.$store.state.app.baseInfo
                // console.log("data",data);
                this.user = data
            },
            toAgreement(textType) {
                this.$router.push({
                    name: '协议',
                    params: { textType }
                })
            },
        },
        created() {
            this.getUserInfo()
            this.setInfo
        }
    }
</script>

<style lang="scss" scoped>
    .login {
        width: 100%;
        min-height: 100vh;
        .logo {
            width: 72px;
            height: 72px !important;
            margin: 83px 0 45px;
            border-radius: 4px;
        }
        .title {
            font-weight: 600;
            font-size: 24px;
            color: #1a1a1a;
            line-height: 24px;
        }

        .login-btn {
            width: 315px;
            height: 50px;
            background: rgba(242, 75, 58, 0.4);
            border-radius: 24px;
            line-height: 50px;
            font-size: 17px;
            font-weight: 500;
            color: #fff;
            margin-top: 67px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            .text {
                font-weight: 500;
                font-size: 16px;
                color: #ffffff;
                line-height: 22px;
            }
            & > img {
                width: 28px;
                height: 28px;
                margin-right: 12px;
            }
        }
        .active {
            background: #f24b3a;
        }

        .others-login {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 400;
            color: #626262;
            margin-top: 25px;
            .middle {
                width: 1px;
                background-color: #ccc;
                height: 13px;
                margin: 0 20px;
            }
        }

        .agreement {
            font-size: 12px;
            font-weight: 400;
            color: #999;
            margin-top: 176px;
            display: flex;
            align-items: center;
            ::v-deep .van-checkbox__icon {
                margin-right: 5px;
            }
            ::v-deep .van-checkbox__icon .van-icon {
                border: 1.2px solid #f24b3a;
            }
            .ct {
                display: flex;
                align-items: center;
            }
        }
        .call {
            font-size: 12px;
            font-weight: 400;
            color: #999;
            margin-top: 14.5px;
            padding-bottom: 36px;
        }
    }
</style>
